<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>

    <style>
        h3 {
            color: red;
        }
        /* 必须是input且必须具有value这个属性 才选中 */
        input[value] {
            color: pink;
        }
        /* 必须是input且type=text 才选中 */
        input[type=text] {
            color: pink;
        }
        /* 必须是div且class属性以icon开头 才选中 */
        div[class^=icon] {
            color: red;
        }
        /* 必须是section且class属性以data结尾 才选中 */
        section[class$=data] {
            color: pink;
        }
    </style>

</head>
<body>
    
    <img src="属性选择器.png" alt="">
    <br><br>
    <h3>注意：类选择器、属性选择器、伪类选择器，权重为10</h3>
    1. 利用属性选择器可以不借助类或者id选择器<br>
    <input type="text" value="请输入用户名">
    <input type="text">
    <br><br>
    2.属性先择期还可以选择属性=值的某些选择(重点)<br>
    <input type="text">
    <input type="password">
    <br><br>
    3.属性选择器可以选择属性值开头的某些元素<br>
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>末尾测试div</div>
    <br><br>
    4.属性选择器可以选择属性值结尾的某些元素<br>
    <section class="icon1-data">div1</section>
    <section class="icon2-data">div2</section>
    <section class="icon3-ico">div3</section>

</body>
</html>